<template>
  <div>
    <!-- 甘特图 -->
    <el-card>
      <div class="title">
        <img src="../../assets/gantt/甘特图.png" />
        <span>甘特图</span>
      </div>
      <div class="gantt_container">
        <div class="gantt_left">
          <div class="gantt_left_tabColumn">
            <div
              class="gantt_left_th"
              v-for="(item,index) in tabColumn"
              :key="index"
              :style="{ width: item.width }"
            >
              {{ item.label }}
            </div>
          </div>
          <div
            class="gantt_left_tabData"
            v-for="(items,indexs) in tableData"
            :key="indexs"
          >
            <div
              class="gantt_left_td"
              v-for="(item,index) in tabColumn"
              :key="index"
              :style="{ width: item.width }"
            >
              {{ items[item.props ]}}
            </div>
          </div>
        </div>
        <div class="gantt_right">
          <div class="gantt_right_tabColumn">
            <div
              class="gantt_right_th"
              v-for="(item,index) in dateColumn"
              :key="index"
              :style="{ width: item.width + 'px' }"
            >
              {{ item.label }}
            </div>
          </div>
          <div
            class="gantt_right_task"
            v-for="(items,indexs) in tableData"
            :key="indexs"
          >
            <div
              class="gantt_right_td"
              v-for="(item,index) in dateColumn"
              :key="index"
              :style="{ width: item.width + 'px' }"
            >
              <div
                class="gantt_item_task"
                :style="item.props === items.KSSJ ? {
                  border:  '1px solid #3BD5B3',
                  width: items.duration * 40 + 'px'
                } : {} "
              >
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getMaximumDate, getFillInDate, getDaysApart, getNowTime } from './componentsFun.js'
export default {
  components: {},
  props: {
    // 表格表头
    tabColumn: {
      type: Array,
      default: () => {
        return [
          { label: '序号', props: 'XH', width: '60px' },
          { label: '项目名称', props: 'XMMC', width: '120px' },
          { label: '开始时间', props: 'KSSJ', width: '120px' },
          { label: '结束时间', props: 'JSSJ', width: '120px' }
        ]
      }
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return [
          { XH: '01', XMMC: 'XXXX项目', KSSJ: '2024-01-08', JSSJ: '2024-01-23' },
          { XH: '02', XMMC: 'XXXX项目', KSSJ: '2024-01-04', JSSJ: '2024-01-15' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
          { XH: '03', XMMC: 'XXXX项目', KSSJ: '2024-01-06', JSSJ: '2024-01-20' },
        ]
      }
    },
    ganttConfiguration: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      dateColumn: []
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.getDateColumn()
    this.getTableData()
  },
  methods: {
    getDateColumn () {
      // 获取当日时间
      // const newDay = getNowTime().substring(0, 10)
      // const bigDate = getMaximumDate(this.tableData, 'JSSJ')
      const dateTotal = getFillInDate('2024-08-01')
      const column = []
      dateTotal.map(item => {
        column.push({
          label: item.substring(8, 10),
          props: item,
          width: 40
        })
      })
      this.dateColumn = column
    },
    // 计算两个日期之间相隔的天数
    getTableData () {
      this.tableData.map(item => {
        item.duration = getDaysApart(item.KSSJ, item.JSSJ)
      })
    }
  },
}
</script>
<style lang='less' scoped>
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  img {
    width: 20px;
    margin-right: 16px;
  }
  span {
    font-family: "ZiTiaoZiChangWuWei";
    font-size: 20px;
    color: #293231;
  }
}
.gantt_container {
  width: 100%;
  display: flex;
  .gantt_left {
    .gantt_left_tabColumn {
      display: flex;
      border-top: 1px solid #e5e7f3;
      border-bottom: 1px solid #e5e7f3;
      box-sizing: border-box;
      .gantt_left_th {
        height: 46px;
        line-height: 46px;
        padding: 0 10px;
        text-align: center;
        box-sizing: border-box;
        border-left: 1px solid #e5e7f3;
        font-family: "ZiTiaoZiChangWuWei";
        color: #727581;
      }
    }
    .gantt_left_tabData {
      display: flex;
      .gantt_left_td {
        height: 46px;
        line-height: 46px;
        padding: 0 10px;
        text-align: center;
        border-left: 1px solid #e5e7f3;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e7f3;
      }
    }
  }
  .gantt_right {
    overflow: auto;
    .gantt_right_tabColumn {
      display: flex;
      border-top: 1px solid #e5e7f3;
      border-bottom: 1px solid #e5e7f3;
      box-sizing: border-box;
      .gantt_right_th {
        height: 46px;
        line-height: 46px;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: center;
        border-left: 1px solid #e5e7f3;
        font-family: "ZiTiaoZiChangWuWei";
        color: #727581;
      }
      .gantt_right_th:last-child {
        border-right: 1px solid #e5e7f3;
        box-sizing: border-box;
      }
    }
    .gantt_right_task {
      height: 46px;
      line-height: 46px;
      border-bottom: 1px solid #e5e7f3;
      border-left: 1px solid #e5e7f3;
      box-sizing: border-box;
      display: flex;
      .gantt_right_td {
        border-right: 1px solid #e5e7f3;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        .gantt_item_task {
          height: 40px;
          z-index: 10 !important;
          position: absolute;
        }
      }
    }
  }
}
</style>